<template>
  <div class="body">
    <div class="box">
      <div class="header">
        <template v-for="(items, index) in res">
          <nav
            class="tab tab1 active"
            :style="{ color: items.active ? 'rgb(118, 162, 223)' : 'black' }"
            @click="goRule(index)"
          >
            {{ items.name }}
          </nav>
          <nav class="line"></nav>
        </template>
      </div>
    </div>
    <div class="page">
      <user v-if="res[0].active"></user>
      <privacy v-if="res[1].active"></privacy>
    </div>
  </div>
</template>

<script>
import user from "./user.vue";
import privacy from "@/views/rule/privacy";

export default {
  name: "rule",
  components: { user, privacy },
  data() {
    return {
      res: [
        {
          name: "用户协议",
          active: true,
        },
        {
          name: "隐私政策",
          active: false,
        },
        {
          name: "在线增值服务协议",
          active: false,
        },
        {
          name: "社区公约",
          active: false,
        },
        {
          name: "第三方SDK目录",
          active: false,
        },
      ],
    };
  },
  methods: {
    goRule(index) {
      for (let i = 0; i < this.res.length; i++) {
        this.res[i].active = false;
      }
      this.res[index].active = true;
    },
  },
};
</script>

<style scoped>
body {
  height: 100%;
  max-width: 1024px;
  text-align: justify;
  font: 16px "Microsoft YaHei", Verdana, Arial;
  margin: 0 auto;
  background: #fff;
}
.box {
  width: 90%;
  margin: 0.3rem auto;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.header {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  text-align: center;
  color: #fff;
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 10px;
}
.header .active {
  color: #76a2df;
}
.header .tab {
  float: left;
  cursor: pointer;
  height: 20px;
  font-size: 15px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: bold;
  color: #2b2b2b;
  line-height: 20px;
  margin-top: 22px;
}
.header .line {
  float: left;
  width: 1px;
  height: 20px;
  background: #cdcdcd;
  margin-top: 22px;
  margin: 23px 20px 0 20px;
}
.page {
  width: 100%;
  padding: 4% 5%;
  background: #fff;
  box-sizing: border-box;
}
</style>
